<template>
	<view>
		<view class="navtit">
			<image @click="open()" src="../../static/admin/image/tit.png"></image>
			<view class="searchbox">
				<image src="../../static/ss1.png"></image>
				<input placeholder="搜索" />
				<view class="butbox" @click="search()">
					搜索
				</view>
			</view>
		</view>
		<view style="height: 124rpx;"></view>
		<view class="navbarbox">
			<view class="navitem" v-for="(item,index) in navlist" :key="index" @click="handlenav(index)">
				<view class="title">{{item}}</view>
				<view v-if="index==navindex" class="tit"></view>
			</view>
		</view>
		<view class="listbox" v-for="(item,index) in list" :key="index">
			<view class="leftbox">
				<image :src="item.url"></image>
			</view>
			<view class="rightbox">
				<view class="namebox">
					{{item.goods_name}}
				</view>
				<view class="stokebox">总库存x{{item.stock_total}}</view>
				<view class="pricebox">
					￥{{item.goods_price_max}}
					<text  v-if="parseInt(item.line_price_min)>0" style="text-decoration: line-through;color: #666666;margin-left: 20rpx;">
						￥{{item.line_price_min}}</text>
				</view>
			</view>
		</view>
		<kong v-if="list.length==0"></kong>
		<view style="height: 140rpx;"></view>
		<view class="navbut">
			<view @click="toaddgoods()">新增商品</view>
		</view>
		<uni-popup ref="popup" type="left">
			<view class="swiperbox">
				<view style="height: 124rpx;"></view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
					<view  class="scroll-view-item" v-for="(item,index) in catelist" :key="index" @click="handlecate(item,index)"
					:style="{'color':item.id==cateindex?'#F94D29':''}">
						{{item.cate_name}}
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import kong from '../../components/kong.vue'
	export default {
		components:{
			kong
		},
		data() {
			return {
				navlist: ['出售中商品', '审核中商品'],//1出售中 2审核中
				navindex: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				cateindex:null,
				myinfo:{},
				list:[],
				catelist:[],
				page_index:1,
				is_data:true,
				keyword:'',
			}
		},
		onShow() {
			this.getmyinfo()
			this.getcate()
		},
		onReachBottom() {
			this.is_data&&this.getlist()
		},
		methods: {
			handlenav(index) {
				this.list=[]
				this.page_index = 1
				this.navindex = index
				this.getlist()
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('left')
			},
			close() {
				this.$refs.popup.close()
			},
			handlecate(item,index){
				this.list=[]
				this.page_index = 1
				this.cateindex = item.id
				setTimeout(()=>{
					this.close()
				},200)
				this.getlist()
			},
			getlist(){
				this.$http({
					url:'api/merch/goodsList',
					data:{
						store_id:this.myinfo.store_id,
						rule_type:this.myinfo.rule_type,
						cate_id:this.cateindex,
						status:this.navindex+1,
						page_index: this.page_index,
						page_size: 20,
						keyword:this.keyword,
					}
				}).then(res=>{
					if(res.data.length){
						this.list.push(...res.data)
						this.page_index ++
						return
					}
					this.is_data = false
				})
			},
			getcate(){
				this.$http({
					url:'api/Wechat/cateList'
				}).then(res=>{
					this.catelist = res.data
				})
			},
			getmyinfo(){
				this.$http({
					url:'api/Wechat/userinfo'
				}).then(res=>{
					//open_non_pay字段判断 0未开启 1已开启
					this.myinfo = res.data
					this.getlist()
				})
			},
			toaddgoods(){
				uni.navigateTo({
					url:'/personalData/addgoods/addgoods'
				})
			},
			//搜索
			search(){
				this.list = []
				this.page_index = 1
				this.getlist()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navtit {
		width: 690rpx;
		height: 124rpx;
		padding: 0 30rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		top: 0;
		z-index: 999;

		image {
			width: 37rpx;
			height: 30rpx;
		}

		.searchbox {
			display: flex;
			align-items: center;
			width: 622rpx;
			height: 70rpx;
			background: #FFFFFF;
			border-radius: 36rpx;
			border: 2rpx solid #F94D29;

			image {
				width: 33rpx;
				height: 27rpx;
				margin-left: 30rpx;
			}

			>input {
				width: 430rpx;
				height: 70rpx;
				padding-left: 30rpx;
			}
		}

		.butbox {
			width: 112rpx;
			height: 70rpx;
			background: linear-gradient(180deg, #F94D29 0%, #F99529 100%);
			border-radius: 36rpx;
			opacity: 1;
			color: #FFF;
			line-height: 70rpx;
			text-align: center;
		}
	}

	.navbarbox {
		width: 750rpx;
		background-color: #FFF;
		height: 70rpx;
		display: flex;
		align-items: center;
		margin-top: 20rpx;

		.navitem {
			width: 50%;
			text-align: center;
			font-size: 30rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #000000;
			position: relative;
			height: 70rpx;

			.title {
				line-height: 70rpx;
			}

			.tit {
				position: absolute;
				bottom: 0;
				z-index: 3;
				width: 64rpx;
				height: 6rpx;
				background: linear-gradient(270deg, #F94D29 0%, #F99529 100%);
				border-radius: 20rpx;
				opacity: 1;
				left: 50%;
				transform: translate(-50%, 0);
			}
		}
	}

	.listbox {
		width: 690rpx;
		padding: 30rpx;
		border: 2rpx solid #F5F5F5;
		background: #FFF;
		display: flex;
		align-items: center;

		.leftbox {
			width: 180rpx;

			image {
				width: 160rpx;
				height: 160rpx;
				background: #FFFFFF;
				border-radius: 14rpx;
			}
		}

		.rightbox {
			width: 510rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;

			.namebox {
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.stokebox {
				margin-top: 20rpx;
				font-size: 26rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #555555;
			}

			.pricebox {
				margin-top: 20rpx;
				font-size: 30rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: #FE5326;
			}
		}
	}

	.navbut {
		width: 750rpx;
		height: 130rpx;
		position: fixed;
		bottom: 0;
		background-color: #FFF;

		>view {
			width: 690rpx;
			height: 96rpx;
			background: linear-gradient(360deg, #F99529 0%, #F94D29 100%);
			border-radius: 83rpx;
			margin: 20rpx auto 0 auto;
			text-align: center;
			color: #FFF;
			line-height: 96rpx;
			font-size: 36rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.swiperbox {
		width: 300rpx;
		background-color: #FFF;
		height:100vh;
		.scroll-Y {
			height: 85vh;
			background-color: #FFF;
			.scroll-view-item {
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				font-size: 36rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #222222;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
</style>